<template>
  <a-spin :spinning="loading">
    <actor-base v-if="userInfo.actorId" :actor-id="userInfo.actorId">
      <template v-slot:page-header>
        <div class="page-header" >
          <a-row type="flex" justify="space-between" align="middle">
            <a-col>
              <div class="page-header-content">
                <div class="avatar">
                  <a-avatar size="large" icon="user"/>
                </div>
                <div class="content">
                  <div class="content-title">
                    {{ userInfo.name }}
                  </div>
                  <div>{{ userInfo.position }} | {{ userInfo.department }} - {{ userInfo.team }} | {{ userInfo.company }}</div>
                </div>
              </div>
            </a-col>
            <a-col>
              <div class="extra-content">
                <div class="stat-item">
                  <a-statistic title="访问总数" :value="userInfo.totalViewed" />
                </div>
                <div class="stat-item">
                  <a-statistic title="今日访问" :value="userInfo.todayViewed" />
                </div>
                <div class="stat-item">
                  <a-statistic title="关注他的" :value="userInfo.watched" />
                </div>
                <div class="stat-item">
                  <a-statistic title="他的关注" :value="userInfo.focus" />
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </template>
    </actor-base>
  </a-spin>
</template>

<script>
// 组件
import ActorBase from './actor-base'

// api
import { profile } from '@/api/login'

export default {
  name: 'Workplace',
  components: {
    ActorBase
  },
  data () {
    return {
      loading: true,
      userInfo: {}
    }
  },
  methods: {
    async getActorInfo () {
      try {
        this.loading = true
        const { id } = this.$route.params
        const content = await profile(id)
        this.userInfo = content
      } catch (error) {

      } finally {
        this.loading = false
      }
    }
  },
  mounted () {
    this.getActorInfo()
  }
}
</script>

<style lang="less" scoped>
 @import "../../components/customPageHeaderContent.less";

.page-header {
  margin-bottom: 24px;
  padding: 12px;
  background: #fff;
}

.avatar {
  /deep/ .anticon-user {
    font-size: 72px
  }
}
</style>
